<template>
  <v-container class="pa-10">
    <div v-if="user_info">
      <!-- 个人信息 -->
      <v-card flat>
        <v-row>
          <!-- 头像 -->
          <v-col class="col-2 d-flex justify-center align-center">
            <v-avatar size="100">
              <img :src="user_info.avatar" />
            </v-avatar>
          </v-col>
          <!-- 姓名和简介 -->
          <v-col>
            <h3 class="mb-2">{{ user_info.full_name }}</h3>
            <span>学院: {{ user_info.school }}</span
            ><br />
            <span>邮箱: {{ user_info.email }}</span
            ><br />
            <span v-if="user_info.desc != null"
              >简介: {{ user_info.desc }} </span
            ><br />
          </v-col>
        </v-row>
        <v-row>
          <!-- 个人信息 -->
          <v-col>
            <v-chip class="chip-style" small color="orange" dark
              >信用值: 100</v-chip
            >
            <v-chip
              v-if="user_info.major != null && user_info.major != ''"
              class="chip-style"
              small
              color="#FF6347"
              dark
              >{{ user_info.major }}</v-chip
            >
            <v-chip
              v-if="user_info.favourite != null && user_info.favourite != ''"
              class="chip-style"
              small
              color="#FF8899"
              dark
              >{{ user_info.favourite }}</v-chip
            >
          </v-col>
        </v-row>
      </v-card>
      <!-- 活动历史 -->
      <v-card v-if="activities" class="mt-8" flat>
        <h3>动态</h3>
        <div v-for="(act, index) in activities" :key="index">
          <ActivityItem class="py-2" :act="act"></ActivityItem>
          <v-divider
            v-if="index != Object.keys(activities).length - 1"
            class="grey lighten-2"
          ></v-divider>
        </div>
      </v-card>
    </div>
  </v-container>
</template>

<script>
import ActivityItem from "../components/ActivityItem.vue";
import { mapGetters } from "vuex";
import axios from "axios";

export default {
  name: "User",
  components: {
    ActivityItem,
  },
  data() {
    return {
      user_info: null,
      activities: null,
    };
  },
  computed: {
    ...mapGetters({ user: "stateUser" }),
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      let username = this.$route.params.username;
      await axios.get("users/" + username).then((res) => {
        if (res.data.error_code === 1) this.$router.push({ name: "NotFound" });
        this.user_info = res.data.user;
      });
    },
    // 加载活动列表
    async getActivities() {
      await axios
        .get("/users/" + this.user_info.username + "/activities")
        .then((res) => {
          this.activities = res.data.activities;
        });
    },
    async getInfo() {
      await this.getUserInfo();
      await this.getActivities();
    },
  },
  watch: {
    // 路由改变时加载用户信息
    $route() {
      this.getInfo();
    },
  },
  // 渲染前加载用户信息
  mounted() {
    this.getInfo();
  },
};
</script>

<style scoped>
.chip-style {
  margin: 3px;
}
</style>